{% extends "base.html" %}
{% import "_macros.html" as macros %}
{% import "_my_wtf_macros.html" as my_wtf_macros %}

{% block title %}万屏时代OPC--通话记录{% endblock %}

{% block panel_heading %}
  万屏时代OPC--通话记录
{% endblock %}

{% block panel_body %}
    <form id="search-form" action="{{ url_for('sever_moor_bp.record_list') }}" method="post" class="form" role="form">
        {{ my_wtf_macros.form_field(form.customer_no, div_col=4, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.transform_result, div_col=4, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.call_type, div_col=4, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.answer_state, div_col=4, label_col=4, field_col=7) }}
        <div class="form-group col-xs-4">
            <button type="submit" class="btn btn-info"
                    id="experience-visit-query-btn">
                查询
            </button>
        </div>
    </form>

    {% if pagination %}
    <div class="pagination">
        {{ macros.pagination_widget(pagination, 'sever_moor_bp.record_list', **url_kwargs) }}
    </div>
    {% endif %}

    <table id="sms-log-table" class="table table-bordered table-hover table-condensed table-striped table-responsive">
        <thead>
            <tr>
                <th>用户ID</th>
                <th>客户电话</th>
                <th>客户昵称</th>
                <th>项目ID</th>
                <th>发起方式</th>
                <th>通话时长</th>
                <th>拨打时间</th>
                <th>处理时间</th>
                <th>接听客服</th>
                <th>转化结果</th>
                <th>备注</th>
                <th>操作</th>
                <th>录音</th>
            </tr>
        </thead>
        <tbody>
            {% for each in records %}
            <tr>
                <td>{{ each.customer_id }}</td>
                <td>{{ each.customer_number | encrypt }}</td>
                <td>{{ each.customer_nickname }}</td>
                {% if each.demand_id %}
                    <td style="white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis;">
                        {{ each.demand_id }}
                    </td>
                {% else %}
                    <td></td>
                {% endif %}
                <td>{{ each.call_type_display }}</td>
                <td>{{ each.answer_state_display }}</td>
                <td>{{ each.created_datetime }}</td>
                <td>{{ each.handle_time_display }}</td>
                <td>{{ each.agent_name }}</td>
                <td>{{ each.transform_result_display }}</td>
                <td>{{ each.extra_info }}</td>
                {% if each.demand_id %}
                    <td><a class="btn btn-success btn-xs" target="_blank" href="{{ url_for('op_bp.demand_info', demand_id=each.demand_id) }}">查看详情</a></td>
                {% else %}
                    <td></td>
                {% endif %}
                {% if each.audio_url %}
                    <td>
                        <audio src="{{ each.audio_url|safe }}"
                           controls="controls" controlsList="nodownload">
                            您的浏览器无法播放该音频。
                        </audio>
                    </td>
                {% else %}
                    <td></td>
                {% endif %}
            </tr>
            {% endfor %}
        </tbody>
    </table>


    {% if pagination %}
    <div class="pagination">
        {{ macros.pagination_widget(pagination, 'sever_moor_bp.record_list', **url_kwargs) }}
    </div>
    {% endif %}
{% endblock %}
